<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="left"></div>
      <div class="right">
        <div class="wrapper">
          <h2 class="login-title">Vue-Element-Pro-Max</h2>
          <div class="form-container">
            <el-input
              v-model="userName"
              placeholder="请输入用户名/手机号"
              prefix-icon="el-icon-user"
              clearable
            />
            <el-input
              v-model="password"
              class="margin-top-lg"
              placeholder="请输入密码"
              type="password"
              clearable
              prefix-icon="el-icon-lock"
            />
            <el-button
              type="primary"
              class="margin-top-lg"
              style="width: 100%"
              @click="login"
            >
              登 录
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      userName: '',
      password: ''
    }
  },
  methods: {
    login() {
      if (!this.userName) {
        this.$errorMsg('用户名不能为空')
      } else if (!this.password) {
        this.$errorMsg('密码不能为空')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: url('../../assets/img_login_bg_01.jpg');
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: cover;
  .login-wrapper {
    display: flex;
    height: 100%;
    width: 100%;
    .left {
      width: 58%;
      height: 100%;
    }
    .right {
      flex: 1;
      .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50%;
        height: 100%;
        .login-title {
          color: #333;
          letter-spacing: 1px;
          padding-bottom: 15%;
        }
      }
    }
  }
  @media screen and (max-width: 992px) {
    background: url('../../assets/img_login_mobile_bg_01.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    .left {
      width: 0 !important;
    }
    .wrapper {
      width: 100% !important;
      padding: 30% 10% 0;
    }
    .login-title {
      display: none !important;
    }
  }
}
</style>
